<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10402000") }}
    </PageTitle>
    <!-- Table model -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline @submit.prevent.native>
        <el-form-item>
          <el-input
            v-model="applyBatchNo"
            :maxlength="32"
            show-word-limit
            :placeholder="$t('developer.device_apply.apply_batch_no')"
            clearable
            @blur="() => (applyBatchNo = applyBatchNo.trim())"
            @keyup.enter.native="search((pageIndex = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="developerName"
            :maxlength="64"
            show-word-limit
            :placeholder="$t('developer.device_apply.developer_name')"
            clearable
            @blur="() => (developerName = developerName.trim())"
            @keyup.enter.native="search((pageIndex = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="status"
            clearable
            :placeholder="$t('developer.device_apply.status')"
          >
            <template #empty> <div /></template>
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="search((pageIndex = 1))">
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="listLoading" :data="applyData" stripe>
        <el-table-column
          :label="$t('developer.device_apply.apply_batch_no')"
          prop="deviceApplyBatchNo"
        />
        <el-table-column
          :label="$t('developer.device_apply.developer_name')"
          prop="developerName"
        />
        <el-table-column :label="$t('developer.device_apply.apply_email')" prop="email" />
        <el-table-column
          :label="$t('developer.device_apply.apply_time')"
          prop="applyTime"
          width="200px"
        >
          <template v-slot="{ row }">
            <div :title="timeFilter(row.applyTime)">
              {{ dateFilter(row.applyTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('developer.device_apply.status')"
          prop="status"
          width="150px"
        >
          <template v-slot="{ row }">
            <el-tag v-if="row.status === 0" size="small" type="private">{{
              statusFilter(row.status)
            }}</el-tag>
            <el-tag v-if="row.status === 1" size="small" type="success">{{
              statusFilter(row.status)
            }}</el-tag>
            <el-tag v-if="row.status === 2" size="small" type="warning">{{
              statusFilter(row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="detail(scope.row)">
                    {{ $t("common.detail") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.status === 0 && isAuth('10400406.MANAGE')"
                    @click="showApproveDialog(scope.row.deviceApplyBatchNo)"
                  >
                    {{ $t("common.approve") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.status === 0 && isAuth('10400406.MANAGE')"
                    @click="showRejectDialog(scope.row.deviceApplyBatchNo)"
                  >
                    {{ $t("common.reject") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <!-- <el-table-column
          min-width="95px"
          :label="$t('common.operate')"
        >
          <template v-slot="scope">
            <el-button type="text" size="small" @click="detail(scope.row)">{{
              $t('common.detail')
            }}</el-button>
            <el-button
              v-if="scope.row.status === 0 && isAuth('10400406.MANAGE')"
              type="text"
              size="small"
              @click="showApproveDialog(scope.row.deviceApplyBatchNo)"
              >{{ $t('common.approve') }}</el-button
            >
            <el-button
              v-if="scope.row.status === 0 && isAuth('10400406.MANAGE')"
              type="text"
              size="small"
              @click="showRejectDialog(scope.row.deviceApplyBatchNo)"
              >{{ $t('common.reject') }}</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <el-dialog :title="$t('common.reject')" v-model="rejectDialogVisible" width="600px">
      <el-form label-position="top">
        <el-input
          v-model="rejectReason"
          type="textarea"
          :rows="4"
          maxlength="256"
          :placeholder="$t('developer.device_apply.reject_reason')"
          @blur="() => (rejectReason = rejectReason.trim())"
        />
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button text @click="rejectDialogVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button
            type="danger"
            :loading="rejectDeviceApplyLoading"
            @click="reject()"
            >{{ $t("common.reject") }}</el-button
          >
        </span></template
      >
    </el-dialog>
    <el-dialog :title="$t('common.approve')" v-model="approveDialogVisible" width="600px">
      <el-form label-position="top">
        <el-input
          v-model="remark"
          type="textarea"
          :rows="4"
          maxlength="256"
          :placeholder="$t('common.remark')"
          @blur="() => (remark = remark.trim())"
        />
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button text @click="approveDialogVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button
            type="primary"
            :loading="approveDeviceApplyLoading"
            @click="approve()"
            >{{ $t("common.approve") }}</el-button
          >
        </span></template
      >
    </el-dialog>
    <device-apply-detail-drawer
      ref="deviceApplyDetailDrawer"
      v-model="deviceApplyDetailDrawerVisible"
      size="800px"
    />
  </div>
</template>

<script>
import { timeFilter, dateFilter } from "@/filters";
import {
  approveDeviceApply,
  getDeviceApplyList,
  rejectDeviceApply,
} from "@/api/developer-device";
import DeviceApplyDetailDrawer from "./components/device-apply-detail-drawer";
import { isAuth } from "@/utils";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  components: {
    DeviceApplyDetailDrawer,
    PageTitle,
  },
  props: {},
  data() {
    return {
      listLoading: false,
      rejectDeviceApplyLoading: false,
      approveDeviceApplyLoading: false,
      deviceApplyDetailDrawerVisible: false,
      rejectDialogVisible: false,
      approveDialogVisible: false,
      applyBatchNo: "",
      developerName: "",
      status: "",
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      applyData: [],
      rejectApplyBatchNo: "",
      approveApplyBatchNo: "",
      rejectReason: "",
      remark: "",
    };
  },
  computed: {
    statusArray() {
      return [
        {
          label: this.$t("developer.device_apply.apply_status_list.wait_for_audit"),
          value: 0,
        },
        {
          label: this.$t("developer.device_apply.apply_status_list.approved"),
          value: 1,
        },
        {
          label: this.$t("developer.device_apply.apply_status_list.reject"),
          value: 2,
        },
      ];
    },
  },
  mounted() {
    this.search();
  },
  methods: {
    timeFilter,
    dateFilter,
    search() {
      this.listLoading = true;
      getDeviceApplyList({
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        applyBatchNo: this.applyBatchNo,
        developerName: this.developerName,
        status: this.status,
      })
        .then((res) => {
          if (res) {
            this.listLoading = false;
            this.applyData = res.data;
            this.totalPage = res.rows;
          }
        })
        .catch((e) => {
          this.$confirmError(e);
          this.listLoading = false;
        });
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.search();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.search();
    },
    detail(deviceApplyInfo) {
      this.deviceApplyDetailDrawerVisible = true;
      this.$nextTick(() => {
        this.$refs.deviceApplyDetailDrawer.init(deviceApplyInfo);
      });
    },
    approve(deviceApplyBatchNo) {
      // this.$confirm(this.$t('developer.device_apply.title.approve'), '', {
      //   confirmButtonText: this.$t('common.confirm'),
      //   cancelButtonText: this.$t('common.cancel'),
      //   type: 'primary'
      // }).then(() => {
      //   this.listLoading = true
      //   approveDeviceApply(deviceApplyBatchNo).then(data => {
      //     if (data) {
      //       this.$message.success(this.$t('common.operate_success'))
      //       this.listLoading = false
      //       this.search()
      //     }
      //   }).catch(e => {
      //     this.listLoading = false
      //     console.log(`err:${JSON.stringify(e)}`)
      //   })
      // })
      this.approveDeviceApplyLoading = true;
      approveDeviceApply({
        applyBatchNo: this.approveApplyBatchNo,
        remark: this.remark,
      })
        .then((data) => {
          if (data) {
            this.$message.success(this.$t("common.operate_success"));
            this.approveDeviceApplyLoading = false;
            this.approveDialogVisible = false;
            this.search();
          }
        })
        .catch((e) => {
          this.$confirmError(e);
          this.approveDeviceApplyLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    reject() {
      if (!this.rejectReason) {
        this.$message.warning(this.$t("developer.device_apply.reject_reason_tip_empty"));
        return;
      }
      this.rejectDeviceApplyLoading = true;
      rejectDeviceApply({
        applyBatchNo: this.rejectApplyBatchNo,
        rejectReason: this.rejectReason,
      })
        .then((data) => {
          if (data) {
            this.$message.success(this.$t("common.operate_success"));
            this.rejectDeviceApplyLoading = false;
            this.rejectDialogVisible = false;
            this.search();
          }
        })
        .catch((e) => {
          this.$confirmError(e);
          this.rejectDeviceApplyLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    showRejectDialog(rejectApplyBatchNo) {
      this.rejectDialogVisible = true;
      this.rejectApplyBatchNo = rejectApplyBatchNo;
      this.rejectReason = "";
    },
    showApproveDialog(approveApplyBatchNo) {
      this.approveDialogVisible = true;
      this.approveApplyBatchNo = approveApplyBatchNo;
      this.remark = "";
    },
    statusFilter(status) {
      const statusMap = {
        0: this.$t("developer.device_apply.apply_status_list.wait_for_audit"),
        1: this.$t("developer.device_apply.apply_status_list.approved"),
        2: this.$t("developer.device_apply.apply_status_list.reject"),
      };
      return statusMap[status];
    },
    isAuth,
  },
};
</script>

<style lang="scss"></style>
